const vBrace = {
  mounted: (el, binding) => {
    // console.log(el, typeof binding.value)
    // console.log(el.querySelectorAll('.condition-row'))

    
    
  },
  updated: (el, binding) => {
    // console.log(binding.value)
    if (!Array.isArray(binding.value)) return

    const rows = el.querySelectorAll('.condition-row')
    const existingBraces = el.querySelectorAll('.brace-container');
    // console.log(rows.length)
    if (rows.length <= 1) {
      // 移除已有的花括号（如果存在）
      existingBraces.forEach(brace => brace.remove());
      return
    } else {
      if (existingBraces.length > 0) {
        return
      }
    }

    if (binding.value.includes('left')) {
      // 创建外层 div
      const outerDiv = document.createElement('div');
      outerDiv.className = 'brace-container'; // 添加类名方便后续清理
      outerDiv.style.position = 'absolute';
      outerDiv.style.left = '0';
      outerDiv.style.top = '5px';
      outerDiv.style.bottom = '5px';
      outerDiv.style.width = '0';

      // 创建上半部分
      const upDiv = document.createElement('div');
      upDiv.style.position = 'absolute';
      upDiv.style.top = '0';
      upDiv.style.height = '50%';

      // 上半部分的三个子元素
      const upTopDiv = document.createElement('div');
      upTopDiv.style.position = 'absolute';
      upTopDiv.style.top = '0';
      upTopDiv.style.width = '8px';
      upTopDiv.style.height = '8px';
      upTopDiv.style.border = '1px solid grey';
      upTopDiv.style.borderTopLeftRadius = '8px';
      upTopDiv.style.borderRight = 'none';
      upTopDiv.style.borderBottom = 'none';

      const upMidDiv = document.createElement('div');
      upMidDiv.style.position = 'absolute';
      upMidDiv.style.top = '8px';
      upMidDiv.style.bottom = '8px';
      upMidDiv.style.width = '1px';
      upMidDiv.style.backgroundColor = 'grey';

      const upBottomDiv = document.createElement('div');
      upBottomDiv.style.position = 'absolute';
      upBottomDiv.style.bottom = '0';
      upBottomDiv.style.left = '-8px';
      upBottomDiv.style.width = '8px';
      upBottomDiv.style.height = '8px';
      upBottomDiv.style.border = '1px solid grey';
      upBottomDiv.style.borderBottomRightRadius = '8px';
      upBottomDiv.style.borderLeft = 'none';
      upBottomDiv.style.borderTop = 'none';

      // 将上半部分的子元素添加到上半部分容器中
      upDiv.appendChild(upTopDiv);
      upDiv.appendChild(upMidDiv);
      upDiv.appendChild(upBottomDiv);

      // 创建下半部分
      const downDiv = document.createElement('div');
      downDiv.style.position = 'absolute';
      downDiv.style.bottom = '0';
      downDiv.style.height = '50%';

      // 下半部分的三个子元素
      const downTopDiv = document.createElement('div');
      downTopDiv.style.position = 'absolute';
      downTopDiv.style.top = '0';
      downTopDiv.style.left = '-8px';
      downTopDiv.style.width = '8px';
      downTopDiv.style.height = '8px';
      downTopDiv.style.border = '1px solid grey';
      downTopDiv.style.borderTopRightRadius = '8px';
      downTopDiv.style.borderLeft = 'none';
      downTopDiv.style.borderBottom = 'none';

      const downMidDiv = document.createElement('div');
      downMidDiv.style.position = 'absolute';
      downMidDiv.style.top = '8px';
      downMidDiv.style.bottom = '8px';
      downMidDiv.style.width = '1px';
      downMidDiv.style.backgroundColor = 'grey';

      const downBottomDiv = document.createElement('div');
      downBottomDiv.style.position = 'absolute';
      downBottomDiv.style.bottom = '0';
      downBottomDiv.style.width = '8px';
      downBottomDiv.style.height = '8px';
      downBottomDiv.style.border = '1px solid grey';
      downBottomDiv.style.borderBottomLeftRadius = '8px';
      downBottomDiv.style.borderRight = 'none';
      downBottomDiv.style.borderTop = 'none';

      // 将下半部分的子元素添加到下半部分容器中
      downDiv.appendChild(downTopDiv);
      downDiv.appendChild(downMidDiv);
      downDiv.appendChild(downBottomDiv);

      // 将上下部分添加到外层容器中
      outerDiv.appendChild(upDiv);
      outerDiv.appendChild(downDiv);

      // 将外层容器添加到目标元素中
      el.appendChild(outerDiv);
    }

    if (binding.value.includes('right')) {
      // 创建外层 div
      const outerDiv = document.createElement('div');
      outerDiv.className = 'brace-container'; // 添加类名方便后续清理
      outerDiv.style.position = 'absolute';
      outerDiv.style.right = '0';
      outerDiv.style.top = '5px';
      outerDiv.style.bottom = '5px';
      outerDiv.style.width = '0';

      // 创建上半部分
      const upDiv = document.createElement('div');
      upDiv.style.position = 'absolute';
      upDiv.style.top = '0';
      upDiv.style.height = '50%';

      // 上半部分的三个子元素
      const upTopDiv = document.createElement('div');
      upTopDiv.style.position = 'absolute';
      upTopDiv.style.top = '0';
      upTopDiv.style.left = '-8px';
      upTopDiv.style.width = '8px';
      upTopDiv.style.height = '8px';
      upTopDiv.style.border = '1px solid grey';
      upTopDiv.style.borderTopRightRadius = '8px';
      upTopDiv.style.borderLeft = 'none';
      upTopDiv.style.borderBottom = 'none';

      const upMidDiv = document.createElement('div');
      upMidDiv.style.position = 'absolute';
      upMidDiv.style.top = '8px';
      upMidDiv.style.bottom = '8px';
      upMidDiv.style.width = '1px';
      upMidDiv.style.backgroundColor = 'grey';

      const upBottomDiv = document.createElement('div');
      upBottomDiv.style.position = 'absolute';
      upBottomDiv.style.bottom = '0';
      upBottomDiv.style.right = '-9px';
      upBottomDiv.style.width = '8px';
      upBottomDiv.style.height = '8px';
      upBottomDiv.style.border = '1px solid grey';
      upBottomDiv.style.borderBottomLeftRadius = '8px';
      upBottomDiv.style.borderRight = 'none';
      upBottomDiv.style.borderTop = 'none';

      // 将上半部分的子元素添加到上半部分容器中
      upDiv.appendChild(upTopDiv);
      upDiv.appendChild(upMidDiv);
      upDiv.appendChild(upBottomDiv);

      // 创建下半部分
      const downDiv = document.createElement('div');
      downDiv.style.position = 'absolute';
      downDiv.style.bottom = '0';
      downDiv.style.height = '50%';

      // 下半部分的三个子元素
      const downTopDiv = document.createElement('div');
      downTopDiv.style.position = 'absolute';
      downTopDiv.style.top = '0';
      downTopDiv.style.right = '-9px';
      downTopDiv.style.width = '8px';
      downTopDiv.style.height = '8px';
      downTopDiv.style.border = '1px solid grey';
      downTopDiv.style.borderTopLeftRadius = '8px';
      downTopDiv.style.borderRight = 'none';
      downTopDiv.style.borderBottom = 'none';

      const downMidDiv = document.createElement('div');
      downMidDiv.style.position = 'absolute';
      downMidDiv.style.top = '8px';
      downMidDiv.style.bottom = '8px';
      downMidDiv.style.width = '1px';
      downMidDiv.style.backgroundColor = 'grey';

      const downBottomDiv = document.createElement('div');
      downBottomDiv.style.position = 'absolute';
      downBottomDiv.style.bottom = '0';
      downBottomDiv.style.left = '-8px';
      downBottomDiv.style.width = '8px';
      downBottomDiv.style.height = '8px';
      downBottomDiv.style.border = '1px solid grey';
      downBottomDiv.style.borderBottomRightRadius = '8px';
      downBottomDiv.style.borderLeft = 'none';
      downBottomDiv.style.borderTop = 'none';

      // 将下半部分的子元素添加到下半部分容器中
      downDiv.appendChild(downTopDiv);
      downDiv.appendChild(downMidDiv);
      downDiv.appendChild(downBottomDiv);

      // 将上下部分添加到外层容器中
      outerDiv.appendChild(upDiv);
      outerDiv.appendChild(downDiv);

      // 将外层容器添加到目标元素中
      el.appendChild(outerDiv);
    }
  }
}
export default vBrace